import { Badge, Button, Card, DatePicker, Form, Input, Modal, Space, Table, Tabs } from "antd"
import { ColumnsType } from "antd/es/table"
import React from "react"
import { ActionButton, QueryFilter, useAntdList, useAntdModal } from "@web-design/ui"
import { queryCrontab, runCrontab, saveTask, updateCrontab } from "../../../api/task"
import SaveParams from "./components/SaveParams"

 

const App = () => {
    const [form] = Form.useForm();
   const {tableProps,search,tabsProps, refresh} = useAntdList(queryCrontab,{
    tabsKey:'status',
    defaultTabsActiveKey:'',
    form
   })
    const saveParams = useAntdModal({refresh})
    const columns: ColumnsType<any> = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '定时规则',
            dataIndex: 'cron',
        },
      
        {
            title: '状态',
            dataIndex: 'status',
            render(value, record, index) {
                return [
                    <Badge color="yellow" text='暂停' />,
                    <Badge color="cyan"text='开启' />,
                   
                ][value]
            },
        },
        {
            title: '创建者',
            dataIndex: 'creator',
        },
       
        {
            title: '更新时间',
            dataIndex: 'updatedAt',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
        },
        {
            title:'操作',
            render(value, record, index) {
                return <Space>
                    <ActionButton action={()=>runCrontab({id:value.id})}  size="small" >运行</ActionButton>
                    <Button onClick={()=>saveParams.openModal(value)} size="small" >编辑</Button>
                    <ActionButton hidden={value.status==1} refresh={refresh} action={()=>updateCrontab({status:1,id:value.id})}  size="small" >开启</ActionButton>
                    <ActionButton hidden={value.status==0}  refresh={refresh} action={()=>updateCrontab({status:0,id:value.id})} size="small" >暂停</ActionButton>
                    <Button size="small"  danger>删除</Button>
                </Space>
            },
        }

    ]
    return <Card>
        <QueryFilter
        items={[
            {
                label:'任务名称',
                name:'name'
            },
            {
                label:'创建时间',
                name:'createTime',
                children:<DatePicker.RangePicker/>
            }
        ]}
        form={form}
         submit={search.submit}
         reset={search.reset}
        />
        <SaveParams {...saveParams}/>
        <Tabs
        tabBarExtraContent={
            <Space>
                <Button onClick={()=>saveParams.openModal({})}>增加任务</Button>
            </Space>
        }
        {...tabsProps}
        items={[{
            label:'全部',
            key:''
        },{
            label:'暂停',
            key:'0'
        },{
            label:'运行',
            key:'1'
        }]}
        />
        <Table size="small" columns={columns} {...tableProps} />
    </Card>
}
export default App